<template>
  <el-table :data="menus" style="width: 100%;height: 30rem;" stripe>
    <el-table-column type="expand">
      <template #default="props">
        <MenuTable :menus="props.row.children" />
      </template>
    </el-table-column>
    <el-table-column prop="title" label="名称" min-width="120" />
    <el-table-column prop="name" label="路由名称" min-width="120" />
    <el-table-column prop="path" label="路劲" min-width="120" />
    <el-table-column prop="icon" label="图标" min-width="120">
      <template #default="scope">
        <Icon :name="scope.row.icon" :size="10" color="black"></Icon>
      </template>
    </el-table-column>
    <el-table-column prop="createAt" label="创建时间" min-width="220">
      <template #default="scope">
        {{ checkTime(scope.row.CreatedAt) }}
      </template>
    </el-table-column>
    <el-table-column prop="updateAt" label="更新时间" min-width="220">
      <template #default="scope">
        {{ checkTime(scope.row.UpdatedAt) }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" fixed="right">
      <template #default="scope">
        <div class="flex items-center gap-2">
          <el-button type="primary" @click="handleAddSon(scope.row)">添加子菜单</el-button>
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteMsg(handleDelete,scope.row)">删除</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <Edit v-model="edit_visible" @init="refrsh" :form-data="editRow"></Edit>
</template>

<script setup lang="ts">
import {checkTime} from "@/global";
import MenuTable from "./MenuTable.vue";
import loadsh from "lodash";
import {ElMessage} from "element-plus";
import {deleteMsg} from "@/global";
import {ref} from "vue";
import {DeleteRole} from "@/api/roles";
import Edit from "./Edit.vue";

const emit = defineEmits(["init"]);
const editRow = ref<any>({})
const edit_visible = ref<boolean>(false)
const addVisible = ref<boolean>(false)
defineProps<{
  menus:any[]
}>()

const refrsh = () => {
  emit("init")
}
const handleEdit = (row: any) => {
  editRow.value = loadsh.cloneDeep(row)
  edit_visible.value = true
};

const handleAddSon = (row:any) => {
  addVisible.value = true

}
const handleDelete = async (row: any) => {
  const res = await DeleteRole([row.id])
  if (res.code === 200) {
    ElMessage.success(res.msg);
    emit("init")
  } else {
    ElMessage.error(res.msg);
  }
};

</script>

<style scoped>

</style>